.loading {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 999;
  background-color: var(--bg);
  opacity: 0.95;

  &-container {
    position: absolute;
    top: -10vh;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: auto;
    &-item {
      width: 40%;
      height: 40%;
      position: absolute;
      border-radius: 50%;
      animation: spin 2s ease infinite;

      &:first-child {
        background: #19a68c;
        animation-delay: -1.5s;
      }
      &:nth-child(2) {
        background: #f63d3a;
        animation-delay: -1s;
      }
      &:nth-child(3) {
        background: #fda543;
        animation-delay: -0.5s;
      }
      &:last-child {
        background: #193b48;
      }
    }
  }

  @keyframes spin {
    0%,
    100% {
      transform: translate(0);
    }
    25% {
      transform: translate(160%);
    }
    50% {
      transform: translate(160%, 160%);
    }
    75% {
      transform: translate(0, 160%);
    }
  }
}
